<template>
  <div>
    <el-dialog style="height: 100vh" :title="$t('导出到xlsx')" :visible.sync="exportDialogVisible"
      :close-on-click-modal="false" :width="dialogWidth">
      <span slot="title">
        <i class="el-icon-close" @click="exportDialogVisible = false"></i>
      </span>
      <div class="export-dialog-container">
        <div class="cloumn-left cloumn-aside">
          <div class="cloumn-export e-description">{{ $t('选择导出的列:') }}</div>
          <el-checkbox class="schema-list" :indeterminate="isIndeterminate" v-model="checkAll"
            @change="handleCheckAllChange">{{ $t('全选') }}</el-checkbox>
          <el-checkbox-group v-model="exportObj.checkList">
            <div v-for="(schema, key) in schemas" :key="key">
              <el-checkbox class="schema-list" :label="schema.label"></el-checkbox>
            </div>
          </el-checkbox-group>
        </div>
        <div class="cloumn-right cloumn-aside">
          <div class="export-file e-description">{{ $t('导出文件名:') }}</div>
          <el-input v-model="exportObj.fileName" :placeholder="$t('请输入文件名')"></el-input>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="exportOrderList">{{ $t('确定') }}</el-button>
      </span>
    </el-dialog>
    <el-dialog class="import-dialog" :title="$t('导入IMEI/SN')" :visible.sync="isImportImei" :width="importDialogWidth"
      :show-close="false" :close-on-click-modal="false">
      <span slot="title">
        <i class="el-icon-close" @click="closeImportImei"></i>
      </span>
      <ImeiImport :availableOrderNum="availableOrderNum" @analisyImei="analisyImei" @closeImport="closeImportImei">

      </ImeiImport>
    </el-dialog>
    <el-dialog class="contact-dialog" :title="$t('客服联系方式')" :width="dialogWidth" :visible.sync="isShowContact"
      :close-on-click-modal="false">
      <span slot="title">
        <i class="el-icon-close" @click="closeContact"></i>
      </span>
      <el-image :src="this.contact?.imageUrl" fit="fill"></el-image>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="isShowContact = false">{{ $t('确定') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ImeiImport from './import/ImeiImport'
import * as util from "@/utils";

export default {
  name: "DilalogList",

  props: {
    contact: {
      type: Object,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: {

      },
    },
    availableOrderNum: {
      type: Number,
      default: 0,
    },
    serviceImeisNum: {
      type: Number,
      default: 0,
    },
    fileName: {
      type: String,
      default: ''
    }
  },

  components: {
    ImeiImport
  },
  computed: {
    mobile() {
      return util.isMobile();
    },
    importDialogWidth() {
      return util.isMobile() ? '340px' : '500px'
    }
  },

  data() {
    return {

      dialogWidth: '50%',
      exportObj: {
        fileName: this.getFormattedFileName(),
        checkList: []
      },
      schemas: [],
      exportDialogVisible: false,
      isImportImei: false,
      isShowContact: false,
      isIndeterminate: true,
      checkAll: true
    }

  },

  created() {
    this.handleResize();
    window.addEventListener('resize', this.handleResize);
    this.exportObj.fileName = this.getFormattedFileName();
  },

  watch: {
    serviceImeisNum: {
      handler() {
        this.exportObj.fileName = this.getFormattedFileName()
      }
    },
    schemas: {
      handler() {
        this.exportObj.checkList = this.schemas.map(schema => schema.label)
      }
    }
  },

  methods: {
    handleResize() {
      if (window.innerWidth <= 768) {
        this.dialogWidth = '90%'; // 手机端宽度设为90%
      } else {
        this.dialogWidth = '50%'; // PC端宽度设为50%
      }
    },
    defaultFileName() {
      let timeStr = util.formatDateTime(new Date()).slice(0, 10)
      return `orders-${timeStr}`
    },
    //关闭导入imei组件
    closeImportImei() {
      this.isImportImei = false;
    },
    //展示联系人联系方式
    closeContact() {
      this.isShowContact = false;
    },
    analisyImei(serviceImeis) {
      this.$emit('analisyImei', serviceImeis)
    },
    exportOrderList() {
      this.$emit("exportOrderList", this.exportObj)
    },
    handleCheckAllChange(val) {
      this.exportObj.checkList = val ? this.schemas.map(schema => schema.label) : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    },
    getFormattedFileName() {
      const now = new Date();
      // 格式化日期和时间
      const year = now.getFullYear();
      const month = this.padZero(now.getMonth() + 1); // 月份从0开始，所以加1
      const day = this.padZero(now.getDate());
      // 拼接文件名
      return `${year}-${month}-${day}-` + this.$t(this.fileName) + '-' + this.$t('数量') + '(' + this.serviceImeisNum + ')';
    },
    padZero(num) {
      // 如果数字小于10，前面补零
      return num < 10 ? '0' + num : num;
    }
  }
}
</script>

<style lang="scss" scoped>
.export-dialog-container {
  padding: 0 20px 0 20px;
  text-align: left;
  min-height: 40vh;
  display: flex;
}

.cloumn-aside {
  flex-grow: 1;
}

.e-description {
  font-size: 25px;
  font-weight: bolder;
  margin-bottom: 10px;
}

.schema-list {
  zoom: 150%;
}

.el-icon-close {
  font-size: 30px;
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;

  &:hover {
    color: #866868;
  }
}
</style>